<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <style>
        .nav{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
        }
        .nav .spacer {
            width: 64%;
        }
        .nav a {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .nav a img {
            transition: transform .2s ease-in-out; /* 添加过渡效果，使图片放大更加平滑 */  
        }
        .nav a img:hover {  
            transform: scale(1.3) translateY(10px); /* 放大图片到1.5倍 */  
        }
        .container{
            padding-top: 80px;
            height: 95%;
        }
        .container-right{
            width: auto;
        }
        .blog-pagnation-wrapper{
            height: 40px;
            margin: 10px 0;
            text-align: center;
        }
        .blog-pagnation-item{
            display: inline-block;
            padding: 8px;
            border: 1px solid #d0d0d5;
            color: #333;
        }
        .blog-pagnation-item:hover{
            background: #4e4eeb;
            color: #fff;
        }
        .blog-pagnation-item.actvie{
            background: #4e4eeb;
            color: #fff;
        }
        .divider { 
            height: 1px;
            width: calc(100% - 60px);
            background-color: #ccc;
            margin: 0px 30px;
        }
        .blog {
            height: 15.5%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="myblog_list.html"><img src="img/default.jpg" alt=""></a>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a id="mybtn" href="login.html">登陆</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 右侧内容详情 -->
        <div id="articleList" class="container-right" style="width: 100%;">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <!-- <a href="#">
                <div class="blog" >
                <div class="title">我的第一篇博客</div>
                <div class="date">2021-06-02</div>
                <div class="desc">正文：Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint tempore magni fuga consequuntur unde et ipsum corrupti ipsa sequi quibusdam temporibus ducimus suscipit, sed, cumque aspernatur tenetur neque, illo tempora.
                    正文：Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint tempore magni fuga consequuntur unde et ipsum corrupti ipsa sequi quibusdam temporibus ducimus suscipit, sed, cumque aspernatur tenetur neque, illo tempora.
                </div>
                </div>
                <div class="divider"></div>
            </a>
            
            <hr>
            <div class="blog-pagnation-wrapper">
                <button class="blog-pagnation-item">首页</button> 
                <button class="blog-pagnation-item">上一页</button>  
                <button class="blog-pagnation-item">下一页</button>
                <button class="blog-pagnation-item">末页</button>
            </div> -->
        </div>
    </div>
</body>
<script>

    var pindex = 1;
    var psize = 6;
    var totalPage = 1;

    //初始化分页的参数
    function initPageParam() {
        var pi = getURLParam("pindex");
        if(pi != "") {
            pindex = pi
        }
        var pz = getURLParam("psize");
        if(pz != "") {
            psize = pz;
        }

        jQuery.ajax({
            url: "/article/totalpage",
            type: "GET",
            data: {"psize": psize},
            success: function(body) {
                if(body.code == 200 && body.data != null) {
                    totalPage = body.data;
                }
            }
        })
    }
    initPageParam();

    function getLoginStatus() {
        jQuery.ajax({
            url: "/user/userstatus",
            type: "get",
            success: function(body) {
                var mybtn = jQuery('#mybtn');
                //未登录就更改按钮
                if(body.data == 1) {
                    mybtn.text("注销");
                    mybtn.click(function() {
                        if(confirm("确认退出？")) {
                            jQuery.ajax({
                                url: "/user/logout",
                                type: "post",
                                data: {},
                                success: function(body) {
                                    location.href = "/login.html";
                                },
                                error: function(err) {
                                    alert("用户未登陆，即将跳转到登陆页！");
                                    location.href = "/login.html";
                                }
                            });
                        }
                    })
                }
            }
        })
    }
    getLoginStatus();

    function getArticleList() {
        jQuery.ajax({
            url: "/article/list",
            type: "GET",
            data: {
                "pindex": pindex,
                "psize": psize
            },
            success: function(body) {
                var html = "";
                if(body.code == 200 && body.data != null && body.data.length>0) {
                    body.data.forEach(function(item){
                        html += '<a href=/blog_content.html?id=' + item.id + '>' +
                                    '<div class="blog" >' +
                                        '<div class="title">' + item.title +'</div>' +
                                        '<div class="date">' + item.createTime + '</div>' +
                                        '<div class="desc">' + item.summary + '</div>' +
                                    '</div>' +
                                    '<div class="divider"></div>' + 
                                '</a>'
                    })
                }
                html += '<hr>' + 
                        '<div class="blog-pagnation-wrapper">' +
                            '<button id = "firstPage" class="blog-pagnation-item">首页</button>' +
                            '<button id = "beforePage" class="blog-pagnation-item">上一页</button>' +
                            '<button id = "nextPage" class="blog-pagnation-item">下一页</button>' +
                            '<button id = "lastPage" class="blog-pagnation-item">末页</button>' +
                        '</div>'
                jQuery('#articleList').html(html);
                // 绑定点击事件
                // 第一页
                jQuery("#firstPage").click(function() {
                    location.href = "blog_list.html";
                });

                // 上一页
                jQuery("#beforePage").click(function() {
                    if(parseInt(pindex) <= 1) {
                        alert("已经是第一页了，不可跳转到上一页！");
                        return false;
                    }
                    pindex = parseInt(pindex) -1;
                    location.href = "blog_list.html?pindex=" + pindex + "&psize=" + psize;
                });

                jQuery("#nextPage").click(function() {
                    //已经在最后一页
                    if(parseInt(pindex) >= parseInt(totalPage)) {
                        alert("已经是最后一页了，不可跳转到下一页！");
                        return false;
                    }
                    pindex = parseInt(pindex) + 1;
                    location.href = "blog_list.html?pindex=" + pindex + "&psize=" + psize;
                })

                jQuery("#lastPage").click(function() {
                    location.href = "blog_list.html?pindex=" + totalPage + "&psize=" + psize;
                })
                
            }
        })
    }
    getArticleList();
    

</script>
</html>